<template>
  <div class="musicinfo">
    <div class="musicinfo-header">
      <div class="musicinfo-title"
            v-text="pageMusicInfo.SN"></div>
      <div class="musicinfo-play-btn"
            v-if="!isMusicInfoNow && status && connect"
            @click="playNewMusic"><i class="fa fa-play fa-fw"></i></div>
      <div class="musicinfo-play-btn"
            v-if="!isMusicInfoNow && status && connect"
            @click="addMusicList"><i class="fa fa-plus fa-fw"></i></div>
    </div>
    <div class="musicinfo-detail">
      <ul>
        <li v-if="pageMusicInfo.S"><span class="detail-tip">演唱：</span><span class="detail-content"
                v-text="pageMusicInfo.S"></span></li>
        <li v-if="pageMusicInfo.YG"><span class="detail-tip">原唱：</span><span class="detail-content"
                v-text="pageMusicInfo.YG"></span></li>
        <li v-if="pageMusicInfo.ZC"><span class="detail-tip">作词：</span><span class="detail-content"
                v-text="pageMusicInfo.ZC"></span></li>
        <li v-if="pageMusicInfo.ZQ"><span class="detail-tip">作曲：</span><span class="detail-content"
                v-text="pageMusicInfo.ZQ"></span></li>
        <li v-if="pageMusicInfo.WO"><span class="detail-tip">编曲：</span><span class="detail-content"
                v-text="pageMusicInfo.WO"></span></li>
        <li v-if="pageMusicInfo.SY"><span class="detail-tip">曲风：</span><span class="detail-content"
                v-text="getStyle(pageMusicInfo.SY)"></span></li>
        <li v-if="pageMusicInfo.SK"><span class="detail-tip">分类：</span><span class="detail-content"
                v-text="getTypeString(pageMusicInfo.SK)"></span></li>
      </ul>
    </div>
    <div class="musicinfo-text">
      <div class="musicinfo-empty"
           v-if="!pageMusicInfo.word">没有歌曲介绍</div>
      <div v-html="formatText(pageMusicInfo.word)"></div>
      <img v-if="pageMusicInfo.img"
           :src="pageMusicInfo.img"
           alt="">
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';

import APIURL from '../APIURL';

export default {
  name: 'musicinfo',
  data() {
    return {
      connect: false,
      status: true,
      tempInfo: {},
    };
  },
  computed: {
    ...mapState({
      musicInfo: state => state.musicplayer.musicInfo,
    }),
    isMusicInfoNow() { return this.$route.name === 'MusicInfoNow' || String(this.musicInfo.ID) === this.$route.params.id; },
    pageMusicInfo() {
      if (this.isMusicInfoNow) {
        return this.musicInfo;
      }
      return this.tempInfo;
    },
  },
  watch: {
    $route() {
      this.init();
    },
  },
  methods: {
    getStyle(text) {
      if (!text) {
        return '';
      }
      const arr = text.split('|');
      if (!arr[arr.length - 1]) {
        arr.pop();
      }
      return arr.join(',');
    },
    getTypeString(text) {
      switch (text) {
        case 'yc':
          return '原创';
        case 'fc':
          return '翻唱';
        case 'bz':
          return '伴奏';
        default:
          return '';
      }
    },
    getTypeNum(text) {
      switch (text) {
        case 'yc':
          return 1;
        case 'fc':
          return 2;
        case 'bz':
          return 3;
        default:
          return '';
      }
    },
    formatText(text) {
      if (!text) {
        return '';
      }
      const arr = text.split('\r\n');
      const result = arr.map((value) => {
        if (value) {
          return `<p>${value}</p>`;
        }
        return '<br>';
      });
      return result.join('');
    },
    getMusicInfo(id, type) {
      return APIURL.SONGINFO(id, type)
        .then((res) => {
          const data = res.data;
          const info = data.data;
          this.connect = true;
          if (data.success) {
            this.status = true;
            this.tempInfo = info;
          } else {
            this.status = false;
          }
        })
        .catch(() => {
          this.connect = false;
          this.status = false;
        });
    },
    playNewMusic() {
      this.$store.dispatch('playNewMusic', this.pageMusicInfo);
    },
    addMusicList() {
      this.$store.commit('addMusicList', {
        popularity: 0,
        singer: this.pageMusicInfo.S,
        singerId: this.pageMusicInfo.SI,
        songId: this.pageMusicInfo.ID,
        songName: this.pageMusicInfo.SN,
        type: this.getTypeNum(this.pageMusicInfo.SK),
      });
    },
    init() {
      if (!this.isMusicInfoNow) {
        this.getMusicInfo(this.$route.params.id, this.$route.params.type);
      }
    },
  },
  mounted() {
    this.init();
  },
};
</script>
<style lang="scss" scoped>
.musicinfo-header {
  display: flex;
  align-items: flex-end;
  margin-bottom: 25px;
  .musicinfo-title {
    padding-left: 50px;
    font-size: 2.8rem;
  }
  .musicinfo-play-btn {
    cursor: pointer;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 1.2rem;
    margin-left: 25px;
    border: 2px solid red;
    border-radius: 50%;
  }
}
.musicinfo-detail {
  ul {
    display: flex;
    flex-flow: row wrap;
    list-style: none;
    li {
      width: 300px;
      font-size: 1.4rem;
      line-height: 1.6rem;
      margin-bottom: 25px;
      text-align: center;
    }
  }
}

.musicinfo-text {
  border-top: 1px solid;
  font-size: 1.6rem;
  line-height: 1.5em;
  padding-top: 25px;
  text-indent: 2em;
  img {
    max-width: 90%;
    display: block;
    margin: auto;
  }
}
</style>
